<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery-3.6.0.js"></script>
<body>
    <div>
    <input type="checkbox"><span>苹果--</span><span>10</span><input type="number" min="0" class="num" value="1"><br><br>
    <input type="checkbox"><span>橘子--</span><span>5</span><input type="number" min="0" class="num" value="1"><br><br>
    <input type="checkbox"><span>西瓜--</span><span>20</span><input type="number" min="0" class="num" value="1">
    <p>总价<span></span></p>
</div>
    <input type="checkbox" id="all">全选
</body>
<script>
$(function(){
    $("div :checkbox,.num").change(function(){
        console.log(123);
        var zongjia=null
      $("div :checkbox").each(function(){
      console.log($(this).next().next().html());
    if($(this).prop("checked")){
     var price = $(this).next().next().html()
     var num   = $(this).next().next().next().val()
     zongjia  += (price*num)
    
    }
    $("span").last().html(zongjia)
  })  
 
    })
    $('#all').change(function(){
        $("div :checkbox").prop("checked",$(this).prop('checked'))
        $("div :checkbox,.num").change()
    })
  
})
</script>
</html>